import {
  useNavigate,
  useSearchParams,
  Link,
  NavLink,
  redirect,
} from "react-router";
import { Button } from "antd";
/**
 * Query 方式 (/user?name=xiaoman)
适用于：传递可选的查询参数
特点：灵活多变，支持多参数
限制：URL可能较长，参数公开可见
 * @returns 
 */

export default function RouteQuery() {
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const name = searchParams.get("name");
  console.log(name);

  const getQuery = () => {
    const name = searchParams.get("name");
    const age = searchParams.get("age");
    console.log(name, age);
  };
  return (
    <div>
      <h1>RouteQuery</h1>
      <p>query参数</p>
      <p>
        query参数是URL中?后面的参数，例如：http://localhost:3000/routeQuery?name=张三&age=18
      </p>
      <p>通过 useNavigate 跳转，URLSearchParams 获取</p>
      <Button
        onClick={() =>
          setSearchParams((pre) => {
            pre.set("name", "四熹丸子");
            pre.set("age", "18");
            return pre;
          })
        }
      >
        设置参数
      </Button>
      <Button onClick={() => navigate("/routeParam/123")}>跳转到params</Button>
      <Link to="/routeState" state={{ name: "小鱼", age: 10 }}>
        state跳转
      </Link>
      <br />
      <hr />
      <NavLink to="/routeState" state={{ name: "小鱼", age: 10 }}>
        state跳转-navLink
      </NavLink>
      <Button onClick={getQuery}>再次获取参数</Button>

      <Button onClick={() => navigate("/routeAsync?name=小鱼&age=18")}>
        跳转到routeAsync
      </Button>

      <Button onClick={() => redirect("/RouteForm")}>重定向</Button>
    </div>
  );
}
